<template>
	<div class=" stujob" >
		<div class="pic-swip" :index="msg">
			<md-card>
					<md-card-media>
								<img src="../assets/JobPic.png" />
					    </md-card-media>
					</md-card>

		</div>
		<div class="nav-bot">
			<span @click="openClass"><img  src="../assets/talk1.png" />课程咨询</span>
			<span @click="openJob"><img src="../assets/talk.png"/>就业咨询</span>
		</div>
		<div class="show-pic"  v-bind:class="{show:isShow}">
			<img @click="closePic" ref="showpic" src="../assets/pict.gif" />
		</div>

		<div>
			<img class="num-pic" src="../assets/stu-job.jpg" />
			<img class="num-pic" src="../assets/stu-job2.jpg" />
			<img class="num-pic" src="../assets/stu-job3.jpg" />

		</div>
		<div class="stu-job-list">
			<div class="job-list-cont">
				<div class="stu-search-btn">
					<h3 style="color: white;">找学长</h3>
					<div class="bg-search">
			    		<i class="el-icon-search" v-on:click="searchStu"></i>
			    		<input ref="inputcont" id="Content" placeholder="搜公司" style="float:right;margin-right:5px;"/>
			    	</div>
			    	<div class="school-btn">
			    		<p class="btn-theme">毕业院校</p>
						<button v-for="item in schoolBtn" ref="btnchecka"  class="no-active"   v-on:click="btnCheckSchool($event)">{{item}}</button>

			    	</div>
			    	<div>
			    		<p class="btn-theme">年级</p>
			    		<button  v-for="item in schoolClass" ref="btncheckb"  v-on:click="btnCheckClass($event)">{{item}}</button>


			    	</div>
			    	<div class="profess-btn">
			    		<p class="btn-theme">专业</p>
			    		<button v-on:click="btnCheckProfess($event)"  v-for="item in schoolprofess" ref="btncheckc">{{item}}</button>


			    	</div>
				</div>
				<div class="stu-job-table">
					<h4 style="color: white;">2017年就业列表</h4>
					<el-table
						:show-header="show-header"
					    :data="tableData"
						size="mini"
					    style="width: 100%">
					    <el-table-column
					      prop="name"
					      width="30"
					      >
					    </el-table-column>
					    <el-table-column
					      prop="sex"
					      width="14"
					     >
					    </el-table-column>
					    <el-table-column
					      prop="school"
					      width="75"
					      >
					    </el-table-column>

					     <el-table-column
					      prop="confirm"
					       width="80"
					      label="地址">
					    </el-table-column>
					     <el-table-column
					      prop="money"
					      width="30"
					      label="地址">
					    </el-table-column>
					     <el-table-column
					      prop="num"
					      width="40"
					      label="地址">
					    </el-table-column>
					  </el-table>

					  	<div class="stu-job-diver">
							<el-pagination
							  @current-change="StuhandleCurrentChange"
							  :current-page="currentPage"
							  background
							  layout="prev, pager, next"
							  :page-size="9"
							  :total="allpage">
							</el-pagination>
						</div>

				</div>
			</div>
		</div>
		<div class=" good-stu">
				<div class="act-item">
					<p class="index-header">
						<span style="color: white;">优秀学员</span>
					</p>
					<md-card>
					<md-card-media>
						      <!-- swiper -->
						<swiper :options="swiperOption2">
						    <swiper-slide v-for="item in goodstudents">
						    	<img :src="item[0]" />
						    	<p class="good-stu-name">{{item[1]}}</p>
						    	<p class="good-stu-job1">{{item[2]}}</p>
						    	<p class="good-stu-intru">
						    		{{item[3]}}
						    	</p>
						    	<span class="stu-bar"></span>
						    </swiper-slide><br/>

						     <div class="swiper-pagination" slot="pagination"></div>

						 </swiper>
					 </md-card-media>
				</md-card>


				   <!-- <div class="next">
				    	<img v-on:click="stuNext" src="../assets/右箭头.png" />
				    </div>-->
				</div>
			</div>

		</div>
	</div>
</template>
<script>

import {swiper,swiperSide} from 'vue-awesome-swiper'
	export default{
		name:'StuJob',
		mounted(){
  		this.swipS()
    	},
		data(){
			return {
				swiperOption2:{
					loop:true,
					 pagination:{
					 	el:'.swiper-pagination',
					 	clickable:true,
					 	},
					 autoplay:true,
					  slidesPerGroup: 2,
					 slidesPerView: 2
					},
				swiperOption:{
					 pagination:'.swiper-pagination',
					 autoplay:true
					},
				swiperOption2:{
					loop:true,
					 pagination:{
					 	el:'.swiper-pagination',
					 	clickable:true,
					 	},
					 autoplay:true,
					  slidesPerGroup: 2,
					 slidesPerView: 2
					},
				msg:'111',
				'show-header':false,
				schoolBtn:[],
				schoolClass:[],
				schoolprofess:[],
				tableData:[],
				goodstudents:[],
				schoolBtnCheck:'',
				schoolBtnClass:'',
				schoolBtnProfess:'',
				allpage:'',
				page:1,
				isShow:false
				}

			},
		components:{
				swiper,
				swiperSide
			},
		methods:{
			openClass(){
				this.isShow = true;
				this.$refs.showpic.src = require("../assets/bg2.png")
			},
			openJob(){
				this.isShow = true;
				this.$refs.showpic.src = require("../assets/pict.gif")
			},
			closePic(){
				this.isShow = false;
			},
	    	swipS(){
	    		let self = this;
	    		this.msg = '';
	    		this.$http({
					method:'get',
					url:'/Students/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					}
				}).then((response)=>{
			      self.schoolBtn = response.data[0];
				    self.schoolClass = response.data[1];
				    self.schoolprofess =response.data[2];
				    self.tableData = response.data[3];
					self.allpage = response.data[4];
				    self.goodstudents = response.data[5]
				})


	    	},

	    	btnCheckSchool(event){

	    		for(let i=0;i<this.$refs.btnchecka.length;i++){
	    		 this.$refs.btnchecka[i].className='no-active'
	    		}
	    		event.target.className = 'stu-btn-active';
	    		this.schoolBtnCheck = event.target.innerHTML;

	    		let self = this;
	    		let Page = this.currentPage;
	    		let searchContent = this.$refs.inputcont.value;
	    		if(Page==undefined){
	    			Page =1;
	    		}

	    		this.$http({
					method:'get',
					url:'SearchStudents/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Content:searchContent,
						School:self.schoolBtnCheck,
						Year:self.schoolBtnClass,
						Major:self.schoolBtnProfess,
						Page:Page
					}
				}).then((response)=>{
			      	 self.tableData = response.data[0];
					 self.allpage = response.data[1];
					self.currentPage = 1;
					console.log(self.currentPage)
				})

	    	},
	    	btnCheckClass(event){

	    		for(let i=0;i<this.$refs.btncheckb.length;i++){
	    		 this.$refs.btncheckb[i].className='no-active'
	    		}
	    		event.target.className = 'stu-btn-active';


	    		let searchContent = this.$refs.inputcont.value;
	    		this.schoolBtnClass = event.target.innerHTML;
	    		let Page = this.currentPage;
	    		if(Page==undefined){
	    			Page =1;
	    		}


	    		var self = this;
	    		this.$http({
					method:'get',
					url:'SearchStudents/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Content:searchContent,
						School:self.schoolBtnCheck,
						Year:self.schoolBtnClass,
						Major:self.schoolBtnProfess,
						Page:Page
					}
				}).then((response)=>{
			      	    self.tableData = response.data[0];
						self.allpage = response.data[1];
					   self.currentPage = 1;
				})
	    	},
	    	btnCheckProfess(event){

	    		for(let i=0;i<this.$refs.btncheckc.length;i++){
	    		 this.$refs.btncheckc[i].className='no-active'
	    		}
	    		event.target.className = 'stu-btn-active';
	    		this.schoolBtnProfess = event.target.innerHTML;

	    		let searchContent = this.$refs.inputcont.value;
	    		console.log(this.checka)
	    		var self = this;
	    		let Page = this.currentPage;
	    		if(Page==undefined){
	    			Page =1;
	    		}

	    		this.$http({
					method:'get',
					url:'SearchStudents/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Content:searchContent,
						School:self.schoolBtnCheck,
						Year:self.schoolBtnClass,
						Major:self.schoolBtnProfess,
						Page:Page
					}
				}).then((response)=>{
			             self.tableData = response.data[0];
						 self.allpage = response.data[1];
						self.currentPage = 1;
				})

	    	},
	    	searchStu(){
	    		let searchContent = this.$refs.inputcont.value;
	    		var self = this;
	    		let Page = this.currentPage;
	    		if(Page==undefined){
	    			Page =1;
	    		}
	    		this.$http({
					method:'get',
					url:'/SearchStudents/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Content:searchContent,
						School:self.schoolBtnCheck,
						Year:self.schoolBtnClass,
						Major:self.schoolBtnProfess,
						Page:Page
					}
				}).then((response)=>{
			      	 self.tableData = response.data[0];
			      	 self.currentPage = 1;
				})

	    	},
	    	StuhandleCurrentChange(val){
	    		this.currentPage = val;
	    		let searchContent = this.$refs.inputcont.value;
	    		let Page = this.currentPage;
	    		let self = this;
	    		console.log(this.currentPage)
	    		if(Page==undefined){
	    			Page =1;
	    		}

	    		this.$http({
					method:'get',
					url:'/SearchStudents/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Content:searchContent,
						School:self.schoolBtnCheck,
						Year:self.schoolBtnClass,
						Major:self.schoolBtnProfess,
						Page:Page
					}
				}).then((response)=>{
			       self.tableData = response.data[0];
						 self.allpage = response.data[1];
				})
	    	}
        }

	}
</script>

<style>
	.nav-bot img{
		width: 30px;
		vertical-align: middle;
		margin-right: 10px;
	}
	.nav-bot span{
		text-align: center;
		display: inline-block;
		float: left;
		width: 50%;
		margin: 0;
		background: white;
		height: 40px;
		font-size: 12px;
		line-height: 40px;
	}
	.show-pic{
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		top: 510px;
		display: none;
		z-index: 10;
	}
	.show{
		display: block!important;
	}
	.show-pic img{
		width: 70%;
		position: relative;
		top: 10px;
		margin-left: 15%;
	}
	button:focus{
		outline: none;
	}
	.stu-bar{
		position: absolute;
		display: inline-block;
		height: 100%;
		width: 5px;
		background: #56d8dc;
		top: 0;
		right: 0;
	}
	 .stujob .el-table{
	background-color: rgba(225,225,225,0.2)!important;
	color: white;
	}
	.el-table tr{
		background-color: rgba(225,225,225,0.2)!important;
	}

	.stujob table{
		font-size: 8px;
		width: 100%!important;
		/*background: rgba(0,0,0,0.2);*/
	}
	.stujob table td{
		overflow: hidden;
	}
	.stujob .el-pagination.is-background .btn-prev{
		min-width: 20px!important;
		margin: 0 2px!important;
	}

.stujob .el-pager li{
	height: 20px!important;
	line-height: 20px!important;
}

.stujob .el-pagination.is-background .el-pager li{
	min-width: 20px!important;
	min-height: 20px!important;
	border-radius: 0 0!important;
	margin: 0 2px!important;
	color: white;
}
.stujob .el-pagination button{
	height: 20px!important;

	line-height: 20px!important;
}
.stujob .stu-btn-active{
	/* background: -moz-linear-gradient(left,#20b8e9,#69e3d8)!important;
	background: -webkit-linear-gradient(left,#20b8e9,#69e3d8)!important; */
	background: #2f8de4!important;
	color: white!important;
}
.el-table .cell{
	padding: 0!important;
}
.no-active{
	background: white;
	color: #999999;
}
	.stujob .index-header{
		font-size: 28px;
		font-weight: bold;
	}
	.stu-job-diver{
		width:100%;
		margin-top: 40px;
		text-align: center;
	}
	.stujob .el-pagination.is-background .btn-next,.stujob .el-pagination.is-background .btn-prev,.stujob .el-pagination.is-background .el-pager li{
		background: none!important;
		border: solid 1px #93a3b2;
		min-width: 20px;
	}

	.stujob .el-pagination.is-background .el-pager li.active{
		background-color: #93a6ad!important;

	}
	.el-pagination{
		font-weight: normal!important;
	}
	.stujob h4{
		color: black;
	}
	.stujob .el-table td{
		padding: 2px 0!important;
		border-bottom: 3px solid rgba(0,0,0,0.2)!important;

	}
	.stujob .stu-job-table{
		width: 100%;
		height: 430px;
		color: #999999;
		text-align: center;
		font-size: 12px;
	}
	.stujob .stu-job-list{
		background: url(../assets/table.png);
		position: relative;
		width: 100%;
		text-align: center;
	}

	.stujob h3,.stujob .btn-theme{
		margin: 0;
		font-weight: normal;

	}
	.stujob .btn-theme{
		font-size: 13px;
		color: white;
		margin-top: 10px;
		margin-bottom: 10px;
		border-bottom: solid 2px rgba(225,225,225,0.3) ;
	}
	.stujob .stu-search-btn button{
		font-size: 12px;
		width: 92px;
		background: rgba(225,225,225,0.3);
		border: none;
		color: white;

		margin-right: 5px;
		height: 20px;
	}

	.stujob .job-list-cont{

		width: 80%;
		text-align: left;
		display: inline-block;
	}
	.stujob .stu-search-btn,.stujob .stu-job-table{
		display: inline-block;
	}
	.stujob .stu-search-btn{
		width: 100%;
		background: rgba(0,0,0,0);
		margin-top: 50px;
	}
	.stujob .bg-search i{
		position: relative;
		right: 7px;
		top: 3px;
		color: white;
	}
	.stujob .bg-search input{
		border: none;
		height: 24px;
		width:90%;
		position: relative;
		top: 3px;
		right: 0px;
		border-radius: 1px 1px;
	}
	.stujob .bg-search{
		/* background: -moz-linear-gradient(left,#20b8e9,#69e3d8);
		background: -webkit-linear-gradient(left,#20b8e9,#69e3d8); */
		background: #008fe0;
		height: 32px;
		border-radius:3px 3px ;
		padding-left: 15px;
		margin-top: 10px;
	}
	.stujob .num-pic{
		width: 100%;
	}
	.stujob .good-stu{
		height: 424px;
		overflow: hidden;
		width: 100%;
		text-align: center;
	}
	.stujob .act-item{
		width: 80%;
		height: 400px;
		overflow: hidden;
		display: inline-block;
	}
	.stujob .good-stu .act-item .prev,.stujob .good-stu .act-item .next{
		position: relative;
		top: -77px;
		width: 80px!important;
		background: none!important;
		margin: 0;
	}
	.stujob .good-stu{
		background: -moz-linear-gradient(left,#20b8e9,#69e3d8)!important;
		background: -webkit-linear-gradient(left,#20b8e9,#69e3d8)!important;
	}
	.stujob .prev img{
		position: relative;
		right: 20px;
	}
	.stujob .good-stu img{
		position: relative;
		top: 30px;
		width: 100px!important;
		height: 100px;
		border-radius: 50% 50%;
	}
	.stujob .good-stu .swiper-slide{
		background: white!important;
		height: 260px;
		width: 50%!important;
		display: inline-block;
		position: relative;
	}
	.stujob .good-stu .act-item div .tea-name{
		text-align: center;

	}
	.stujob .good-stu .swiper-container{
		width: 100%;
		height: 300px;
	}
	.stujob .good-stu-name{
		font-weight: bold;
		font-size: 14px!important;
		margin-top: 50px;
	}
	.stujob .good-stu-job1{
		font-size: 13px!important;
		color: gray;
		color: #28adf0;
		padding-left:15px!important ;
		padding-right:15px!important ;
	}
	.stujob .good-stu-intru{
		font-size: 10px!important;
		padding-left:15px!important ;
		padding-right:15px!important ;
		padding-bottom: 30px!important;
	}
	.stujob .pic-swip{
		width: 100%;
		height: 470px;
		position: relative;
		top:0;
	}
	.stujob .pic-swip img{
		width: 100%;
		height: 100%;
	}
	.stujob {
		position: relative;
		top: 80px;
	}
</style>
